<template>
  <div>
    <div class="tab_menu" v-if="isHandel">
      <van-tabbar v-model="active" @change="onChange" :placeholder='true'>
        <van-tabbar-item >
          <span>首页</span>
          <template #icon="props">
            <img :src="props.active ? icon.active : icon.inactive" />
          </template>
        </van-tabbar-item>
        <van-tabbar-item>
          <span>购物车</span>
          <template #icon="props">
            <img :src="props.active ? icon1.active : icon1.inactive" />
          </template>
        </van-tabbar-item>
         <van-tabbar-item>
          <span>我的</span>
          <template #icon="props">
            <img :src="props.active ? icon2.active : icon2.inactive" />
          </template>
        </van-tabbar-item>
      </van-tabbar>
      
    </div>
  </div>
</template>

<script>
import { ContactList } from "vant";
export default {
  data() {
    return {
      active: 0,
      icon: {
        inactive: "https://i.postimg.cc/65nvCXb1/home.png",
        active: "https://i.postimg.cc/rwpqMG4C/home-o.png",
      },
      icon1:{
        inactive: "https://i.postimg.cc/2jsfPRjY/cart.png",
        active: "https://i.postimg.cc/HLxKrBW3/cart-o.png",
      },
      icon2:{
        inactive:'https://i.postimg.cc/cJnRknF0/my.png',
        active: "https://i.postimg.cc/g08hHP00/my-o.png",
      },
      isHandel:true//是否隐藏
      
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  activated() {
     this.getRouter()
  },
   created() {
     this.getRouter()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  methods: {
    getRouter(){
      let rou=this.$route.path
      if(rou=="/index/personalCenter"){
        this.isHandel=true
        this.active=2
      }
      else if(rou=="/index/home"){
         this.isHandel=true
        this.active=0
      }
      else if(rou=="/index/shoppingCart"){
         this.isHandel=true
        this.active=1
      }
      else{
        this.isHandel=false
      }
      
    },
    onChange(index) {
      if (index == 0) {
        this.$router.push("/index/home");
      }
      if (index == 1) {
        this.$router.push("/index/shoppingCart");
      }
      if (index == 2) {
        this.$router.push("/index/personalCenter");
      }
    },
  },
  watch:{
    "$route":'getRouter'
  }
};
</script>
<style scoped lang="less">
@vw: 0.06667vw;
@vh: 0.03748vw;
.tab_menu {
  display: flex;
  position: fixed;
  
  height: 396 * @vh;
  background-color: #cccccc69;
  bottom: 0px;
  justify-content: space-around;
  text-align: center;
  .tab_menu_item {
    width: 10vw;

    .icon {
      height: 65%;
      justify-content: center;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .text {
      size: 12 * @vw;
      font-size: 12 * @vw;
    }
  }
}
</style>